<script setup lang="ts">
import { computed, h, onMounted, reactive, ref } from "vue";
import {
  deletePictureUsingPost,
  getPictureVoByIdUsingGet,
} from "@/api/pictureController.ts";
import {
  EditOutlined,
  DeleteOutlined,
  DownloadOutlined,
} from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import {downloadImage, formatSize} from "@/utils";
import { useLoginUserStore } from "@/stores/user.ts";
import router from "@/router";

interface Props {
  id: string | number;
}

const props = defineProps<Props>();
const picture = ref<API.PictureVO>({});

// 获取图片详情
const fetchPictureDetail = async () => {
  try {
    const res = await getPictureVoByIdUsingGet({
      id: props.id,
    });
    if (res.code === 0 && res.data) {
      picture.value = res.data;
    } else {
      message.error("获取图片详情失败，" + res.message);
    }
  } catch (e: any) {
    message.error("获取图片详情失败：" + e.message);
  }
};

const loginUserStore = useLoginUserStore();
// 是否具有编辑权限
const canEdit = computed(() => {
  const loginUser = loginUserStore.getLoginUser();
  // 未登录不可编辑
  if (!loginUser.id) {
    return false;
  }
  // 仅本人或管理员可编辑
  const user = picture.value.userVO || {};
  return loginUser.id === user.id || loginUser.userRole === "admin";
});

// 编辑
const doEdit = () => {
  router.push("/addPicture?id=" + picture.value.id);
};
// 删除
const doDelete = async () => {
  const id = picture.value.id;
  if (!id) {
    return;
  }
  const res = await deletePictureUsingPost({ id });
  if (res.code === 0) {
    message.success("删除成功");
  } else {
    message.error("删除失败");
  }
};
// 处理下载
const doDownload = () => {
  downloadImage(picture.value.url)
}


onMounted(() => {
  fetchPictureDetail();
});
</script>

<template>
  <div id="pictureDetailPage">
    <a-row :gutter="[16, 16]">
      <!-- 图片展示区 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card title="图片预览">
          <a-image
            style="max-height: 600px; object-fit: contain"
            :src="picture.url"
          />
        </a-card>
      </a-col>
      <!-- 图片信息区 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.userVO?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? "未命名" }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? "-" }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? "默认" }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? "-" }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? "-" }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? "-" }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? "-" }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
          </a-descriptions>
          <!--          图片编辑-->
          <a-space wrap>
            <a-button type="primary" @click="doDownload">
              免费下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>

            <a-button
              v-if="canEdit"
              type="default"
              :icon="h(EditOutlined)"
              @click="doEdit"
              >编辑
            </a-button>
            <a-button
              v-if="canEdit"
              danger
              :icon="h(DeleteOutlined)"
              @click="doDelete"
              >删除
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
#pictureDetailPage {
  margin-bottom: 16px;
}
</style>
